<template>
    <div class="goodsInfo">
        <h1>| 商品详细</h1>
        <div class="head">
            <div class="few_info">
                膳魔师<br>
                不锈钢保温杯男女士带水杯盖保冷杯办公商务茶杯车载保温杯 深灰色 500ml<br>
                供货商SKU号：AUD4928767910736<br>
                商品条形码：4928767910736<br> 
            </div>
            <div class="goods_status">
                <h3>审核状态：待审核</h3>
                <h3>上下架状态：待上架</h3>
            </div>
        </div>
        <div class="table">
                <div class="table_content" v-show="isTableData">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="operate"
                        label="处理环节"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="发生时间"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="controler"
                        label="操作者"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="result"
                        label="处理明细"
                        width="220">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="table_content" v-show="!isTableData" style="fontSize:14px;marginTop:10px;color:#747272;">点击展开历史操作列表</div>
            <div class="toggle">
                <el-button round @click="isTableData=!isTableData">收展列表</el-button>
            </div>
        </div>
        <div class="detail_info">
            <div class="detail_info_content" v-show="isDetailData">
                <el-form :label-position="labelPosition" label-width="80px" :model="detailinfo">
                    <el-form-item label="商品渠道:">
                        <span v-text="detailinfo.from"></span>
                    </el-form-item>
                    <el-form-item label="商品分类:">
                        <span v-text="detailinfo.type"></span>
                    </el-form-item>
                    <el-form-item label="商品净重:">
                        <span v-text="detailinfo.weight"></span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="detail_info_content" v-show="!isDetailData" style="fontSize:14px;marginTop:10px;color:#747272;">点击展开详细信息</div>
            <div class="toggle">
                <el-button round @click="isDetailData=!isDetailData">收展信息</el-button>
            </div>
        </div>
        <footer>
            <el-button>上架/下架</el-button>
            <el-button  @click='goback()'>返回列表</el-button>
        </footer>
    </div>			
</template>

<script>

export default {
    data(){
        return{
            infoData:{
                sku:this.$route.params.sku
            },
            tableData: [{
                operate:'提交商品信息',
                date: '2016-05-02',
                controler: '王小虎',
                result: '提交成功'
                },{
                operate:'提交商品信息',
                date: '2016-05-02',
                controler: '王小虎',
                result: '提交成功'
                }, {
                operate:'提交商品信息',
                date: '2016-05-02',
                controler: '王小虎',
                result: '提交成功'
                }, {
                operate:'提交商品信息',
                date: '2016-05-02',
                controler: '王小虎',
                result: '提交成功'
            }],
            isTableData:true,
            isDetailData:true,
            detailinfo:{
                from:'供货商1 、供货商2 、供货商3 ',
                type:'生活日用',
                weight:'0.3 kg'
            },
            labelPosition: 'right',
        }
    },
    created(){
        
    },
    methods:{
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>

<style lang="scss">
    .goodsInfo{
        padding-bottom: 40px;
        .el-button{
            background-color:#f1895c;
            color:white;
            border:none;
        }
        .el-button:hover{
            background-color:#fcac8a;
            color: white;
        }
        
        h1{
            font-size: 14px;
            color: #5a5a5a;
        }

        .head{
            padding-top: 20px;
            padding-left: 60px;
            width: 950px;
            // border: 1px solid black;
            margin: 0 auto;
            padding-bottom: 25px;
            display: flex;
            justify-content: space-between;
            border-bottom:2px solid  rgb(212, 212, 212);
            .few_info{
                line-height: 2em;
                color: #747272;
                font-size: 14px;
                font-weight: 100;

            }
            .goods_status{
                font-size: 11px;
                h3 {
                    font-weight: 100;
                }
            }
        }

        .table{
            padding: 30px;
            margin:0 65px;
            border-bottom: 2px solid rgb(212, 212, 212);
            overflow: hidden;
            .table_content{
                float: left;
            }
            .toggle{
                float: right;
            }
        }

        .detail_info{
            padding: 30px;
            margin:0 65px;
            // border: 1px solid black;
            overflow: hidden;
           .detail_info_content{
               width: 700px;
               float: left;
               .el-form-item{
                   margin-bottom: 0px;
               }
           } 
           .toggle{
               float: right;
           }
        }

        footer{
            text-align: center;
            margin: 0 auto;
            .el-button{
                margin-right: 30px;
            }
        }


    }
</style>

